import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import axios from '../../axios/axios'
import Draggable from 'react-draggable';
import { Card,Modal,Input,Button,Layout, Menu, Breadcrumb,Carousel,Row, Col, Divider,Typography, Space, } from 'antd';
import './index.css'
import Particles from 'react-particles-js';

const { Title, Paragraph, Text, } = Typography;
const { Header, Footer, Sider, Content } = Layout;
const { Meta } = Card;

export default class Home extends React.Component {

    constructor(props) {
        super(props);
        this.PushToLogin = this.PushToLogin.bind(this);
        this.PushToHome = this.PushToHome.bind(this);
    }

    PushToHome(){

    }

    PushToLogin(){

    }

    render(){
        return (
            <>
                <Layout className="layout">
                <Particles
                    style={{ position: "fixed", top:0}}
                    height="95%"
                    width="100%"
                    params={{
                        particles: {
                        color: {
                            value: "#000000"
                        },
                        line_linked: {
                            color: {
                            value: "#1E90FF"
                            }
                        },
                        number: {
                            value: 50
                        },
                        size: {
                            value: 3.25
                        }
                        }
                    }}
                />
                <Header>
                    <div className="logo" />
                    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                    </Menu>
                </Header>
                <Content style={{ margin: '24px 16px 0', overflow: 'initial',padding: '0 50px' }}>
                <Breadcrumb style={{ margin: '16px 0' ,textAlign: 'center'}}>
                    <Breadcrumb.Item>
                        <h1>
                            <Text mark>~~~欢迎来到问卷星球~~~</Text>
                        </h1>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <div className="site-layout-background" style={{ padding: 8, textAlign: 'center', marginTop: '32px' }} id="demo">
                    <div className="site-layout-content">
                        <Row justify="space-around">
                            <Col span={3}>
                                <div onClick={this.PushToLogin}>
                                <Link to="/">
                                    <Card title="登 录"
                                        hoverable
                                        style={{ width: 160, }}
                                        bodyStyle={{backgroundColor: 'rgba(30, 144, 255, 1)', border: 0 }}
                                    >
                                        <Meta title="注 册"  />
                                    </Card>
                                </Link>
                                </div>
                            </Col>
                            <Col span={12}>
                            <Card>
                            <Typography>
                                <Title keyboard>在这里有</Title>
                                <Paragraph>
                                    <Space direction='vertical'>
                                        <h2><Text type="success">丰富的问卷类型选择</Text></h2>
                                        <h4><Text italic>普通问卷/投票问卷/报名问卷/考试问卷/打卡问卷</Text></h4>
                                        <h2><Text type="warning">有好的用户使用体验</Text></h2>
                                        <h4><Text italic>链接+二维码快速分享/历史问卷数据保存</Text></h4>
                                        <h2><Text type="danger">直观的数据保存分析</Text></h2>
                                        <h4><Text italic>问卷数据统计分析/直观掌握调查结果</Text></h4>
                                    </Space>
                                </Paragraph>
                            </Typography>
                            </Card>
                            </Col>
                            <Col span={3}>
                                <div onClick={this.PushToHome}>
                                    <Link to='/home'>
                                        <Card title="开始"
                                        hoverable
                                        style={{ width: 160 }}
                                        bodyStyle={{backgroundColor: 'rgba(30, 144, 255, 1)', border: 0 }}
                                    >
                                        <Meta title="使用"  />
                                    </Card>
                                    </Link>
                                </div>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>~~~开发人员：冯宇扬/张偌瑜/汪钇辰/卢紫琪/施东成/郝嘉琛~~~</Footer>
        </Layout>
            </>
        )
    }
}